<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:auth=""
>
<auth:data uri="/tools/qrcode"/>
<head>
    <th:block th:include="common/head::noXadmin('辅助工具')"/>
</head>
<body>
<div>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">二维码</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show ">
                <div class="layui-row layui-form ">
                    <div class="layui-col-md8  ">
                        <div class="layui-form-item layui-form-text">
                            <textarea id="qrcode-con" placeholder="请输入内容" class="layui-textarea"
                                      style="height: 250px;resize: none;"></textarea>
                        </div>
                        <div class="layui-form-item">
                            <button id="qrcode-btn" class="layui-btn ">生成二维码</button>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="fa-box-center-middle layui-form-item"
                             style="width: 200px;height: 200px;background: #efefef;">
                            <img style="width: 200px;height: 200px;display: none;" src="" id="qrcode-img"/>
                            <span id="qrcode-tips" style="color:#bbb;font-size: 16px;">此处生成二维码</span>
                        </div>
                        <div class="layui-form-item text-align-center" style="margin-top:20px;">
                            <a href="javascript:void(0);" id="qrcode-down" class="layui-btn ">下载二维码</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery'], function () {
        let $ = layui.$;

        function showImg(url) {
            $("#qrcode-tips").hide();
            $("#qrcode-img").attr('src', url).show();
            $("#qrcode-down").attr('href', url);
            $("#qrcode-down").attr('download', 'qrcode.jpg');
        }

        $("#qrcode-btn").on('click', function (e) {
            $.post('/tools/qrcode', {
                content: $("#qrcode-con").val(),
                w: 200,
                h: 200
            }, function (data, status) {
                showImg(data.data.url);
            });
        })
    })

</script>
</body>

</html>
